<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div id="header">
        <div class="logo-wrap wrap">
            <div class="logo_container">
                <img src="./images/logo.svg" alt="">
                <ul class="logo_c">
                    <li><a href="#" class="first">首页</a></li>
                    <li><a href="#">发现</a>
                        <div class="navigation">
                            <ul class="nav">
                                <li><a href="#">平面</a></li>
                                <li><a href="#">UI</a></li>
                                <li><a href="#">网页</a></li>
                                <li><a href="#">插画</a></li>
                                <li><a href="#">动漫</a></li>
                                <li><a href="#">摄影</a></li>
                                <li><a href="#">空间</a></li>
                                <li><a href="#">平面</a></li>
                                <li><a href="#">UI</a></li>
                                <li><a href="#">网页</a></li>
                                <li><a href="#">插画</a></li>
                                <li><a href="#">动漫</a></li>
                                <li><a href="#">摄影</a></li>
                                <li><a href="#">空间</a></li>
                            </ul>
                            <div class="selection">
                                <p>精选作品></p>
                                <p>精选文章></p>
                                <p>精选收藏></p>
                            </div>
                        </div>

                    </li>
                    <li><a href="#">职位</a>
                        <ul class="nav1">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">网页</a></li>
                        </ul>
                    </li>
                    <li><a href="#">活动</a>
                        <ul class="nav2">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">网页</a></li>
                            <li><a href="#">网页</a></li>
                            <li><a href="#">网页</a></li>
                        </ul>
                    </li>
                    <li><a href="#">正版素材</a>
                        <ul class="nav2">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">网页</a></li>
                            <li><a href="#">网页</a></li>
                            <li><a href="#">网页</a></li>
                        </ul>
                    </li>
                    <li><a href="#">课程</a>
                        <ul class="nav1">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">网页</a></li>
                        </ul>
                    </li>
                    <li><a href="#">版权保护</a>
                        <ul class="nav1">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">网页</a></li>
                        </ul>
                    </li>
                    <li class="more_box"><i class="more">. . .</i>
                        <ul class="nav3">
                            <li><a href="#">平面</a></li>
                            <li><a href="#">UI</a></li>
                            <li><a href="#">网页</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="search">
                    <i class="iconfont icon-fangdajing"></i>
                </div>
                <div class="search clear_margin">
                    <i class="iconfont icon-Cloudupload"></i>
                </div>
                <div class="login">
                    <p><a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">登录</a>
                    </p>
                </div>
            </div>

        </div>

    </div>
    <div class="returnTop">
        <p>^</p>
    </div>
    <div class="banner-wrap wrap">

        <div id="container">
            <a id="prev_btn"><img src="img/zuo-copy.png" /></a>
            <a id="next_btn"><img src="img/you-copy.png" /></a>
            <ul id="banner_container">
                <li><img src="images/01fb4c5f080d5fa80120662145f89d.png@1380w" alt=""></li>
                <li><img src="images/018b805f082088a801206621aef87e.jpg@1380w" alt=""></li>
                <li><img src="images/01aa7a5f07cf79a801215aa0904370.jpg@1380w" alt=""></li>
                <li><img src="images/014f055f080ec9a8012066216e2d66.png@1380w" alt=""></li>
                <li><img src="images/01fb4c5f080d5fa80120662145f89d.png@1380w" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="box wrap">
        <img src="./images/a.jpeg" alt="">
        <img src="./images/b.jpg" alt="">
        <img src="./images/c.jpg" alt="">
        <img src="./images/d.jpg" alt="">
        <img src="./images/a.jpeg" alt="">
    </div>
    <div class="main-wrap wrap">
        <p><a href="#">首页推荐</a></p>
        <p><a href="#">最新发布</a></p>
    </div>
    <div id="readen">
        <div class="readenbox wrap">
        </div>
    </div>
    <div id="buttonbox">
        <div class="numBtnBox wrap">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>...</div>
            <div>99</div>
            <div>100</div>
            <div>></div>
        </div>
    </div>
    <div id="banner-box">
        <div class="bannerPic wrap">
            <img src="./images/photo.jpg" alt="">
        </div>
    </div>
    <div class="box wrap">
        <img src="./images/a.jpeg" alt="">
        <img src="./images/b.jpg" alt="">
        <img src="./images/c.jpg" alt="">
        <img src="./images/d.jpg" alt="">
        <img src="./images/a.jpeg" alt="">
    </div>
    <div id="footer">
        <div class="footer-wrap wrap">
            <div class="footer-top">
                <div class="footerTop_left">
                    <p><a href="#">移动版</a></p>
                    <p><a href="#">关于我们</a></p>
                    <p><a href="#">用户协议</a></p>
                    <p><a href="#">关于我们</a></p>
                    <p><a href="#">用户协议</a></p>
                    <p><a href="#">关于我们</a></p>
                    <p><a href="#">用户协议</a></p>
                    <p><a href="#">关于我们</a></p>
                    <p><a href="#">用户协议</a></p>
                    <p><a href="#">联系我们</a></p>
                </div>
                <div class="footerTop_right">
                    <p>
                        <img src="./images/下载01.svg" alt="">
                    </p>
                    <p>
                        <img src="./images/下载02.svg" alt="">
                    </p>
                </div>

            </div>
            <div class="footerCenter">
                <p>京公网安备京公网安备京</p>
                <p>|</p>
                <p>京公网安备京公网安备京</p>
                <p>|</p>
                <p>京公网安备京公网安备京</p>
                <p>|</p>
                <p>京公网安备京公网安备京</p>
            </div>
            <div class="footerBottom">
                <div class="footerBottom_left">
                    <p>营业执照</p>
                    <p>|</p>
                    <p>网上有害信息举报专区</p>
                    <p>|</p>
                    <p>网上有害信息举报专区</p>
                    <p>|</p>
                    <p>网上有害信息举报专区</p>
                    <p>|</p>
                    <p>网上有害信息举报专区</p>
                </div>
                <div class="footerBottom_rigth">
                    <p>Copyrigth@2010230123</p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./js/data.js"></script>
    <script>
        function Banner() {
            this.index = 0;
            this.banner_container = document.querySelector("#banner_container");
            this.slides = document.querySelectorAll("#banner_container li");
            this.prev_btn = document.querySelector("#prev_btn");
            this.next_btn = document.querySelector("#next_btn");
            this.container = document.querySelector("#container");
            this.bindEvent();
        }
        Banner.prototype.bindEvent = function () {
            var self = this;
            var max_index = self.slides.length - 1;
            self.prev_btn.onclick = function () {
                if (self.index === 0) {
                    self.banner_container.style.left = -max_index * 1130 + "px";
                    self.index = max_index - 1;
                } else {
                    self.index--;
                }
                self.changeSlide();
            }
            self.next_btn.onclick = function () {
                if (self.index === max_index) {
                    self.banner_container.style.left = 0;
                    self.index = 1;
                } else {
                    self.index++;
                }
                self.changeSlide();
            }
        }
        Banner.prototype.changeSlide = function () {
            $(this.banner_container)
                .stop()
                .animate({
                    left: -this.index * 1130
                }, 1000)
        }
        Banner.prototype.autoPlay = function () {
            var self = this;
            var t = setInterval(function () {
                self.next_btn.onclick();
            }, 3000)
            this.container.onmouseover = function () {
                clearInterval(t);
                self.prev_btn.style.display = "block"
                self.next_btn.style.display = "block"
            }
            this.container.onmouseout = function () {
                clearInterval(t);
                self.prev_btn.style.display = "none"
                self.next_btn.style.display = "none"
                t = setInterval(function () {
                    self.next_btn.onclick();
                }, 3000)
            }
        }

        var bann = new Banner();
        bann.autoPlay()
        /* 1*/
        var box = document.querySelector('.readenbox');
        function render() {
            data.forEach(function (item, index) {
                box.innerHTML += ` 
                <div class="container">
            <img src="${item.cardImgSrc}" alt="">
            <div class="text">
                <p>${item.ptitle}</p>
                <p class="p1">${item.ptype}</p>
            </div>
            <div class="review">
                <i class="iconfont icon-yanjing"></i><span>${item.view}</span>
                <i class="iconfont icon-pinglun"></i><span>${item.comment}</span>
                <i class="iconfont icon-dianzan1"></i><span>${item.tuijian}</span>
            </div>
            <div class="user">
                <img src="${item.itemImgSrc}" alt="">
                <p>1小时前</p>
            </div>
        </div>
                `
            })
        }
        render();
        var returnTop = document.querySelector('.returnTop');
        returnTop.onclick = function () {
            scrollTo({ top: 0 })
        }
    </script>
</body>

</html>